<template>
	<view 
		@touchmove="handletouchmove($event)"
		@touchstart="handletouchstart($event)" 
		@touchend="handletouchend">
		<slot></slot>
	</view>
</template>

<script>
	/**
	 * 滑动方向组件
	 */
	export default{
		data:()=>({
			flag: 0,
			text: '',
			lastX: 0,
			lastY: 0,
			direction: ['left', 'right', 'up', 'down']
		}),
		methods:{
			handletouchmove(event){
				if (this.flag !== 0) return;
				let currentX = event.touches[0].pageX;
				let currentY = event.touches[0].pageY;
				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;
				let text = '';
				
				if (Math.abs(tx) > Math.abs(ty)) { //左右方向滑动
					if (tx < 0) {
						text = '向左滑动';
						this.flag = 1;
					} else if (tx > 0) {
						text = '向右滑动';
						this.flag = 2;
					}
				}else { //上下方向滑动
					if (ty < 0) {
						text = '向上滑动';
						this.flag = 3;
					} else if (ty > 0) {
						text = '向下滑动';
						this.flag = 4;
					}
				}
				
				//将当前坐标进行保存以进行下一次计算
				this.lastX = currentX;
				this.lastY = currentY;
				this.text = text;
				this.$emit('direction', this.direction[this.flag-1])
			},
			handletouchstart(event){
				this.lastX = event.touches[0].pageX;
				this.lastY = event.touches[0].pageY;
			},
			handletouchend(){
				this.flag = 0;
				this.text = '没有滑动';
			},
		}
	}
</script>

<style>
</style>
